<template>
  <div class="service-wrap">
   <div class="box">
      <van-button type="warning" class="item">政务</van-button>
      <van-button type="default" class="item">公共服务</van-button>
      <van-button type="default" class="item">便民</van-button>
      <van-button type="default" class="item">交通出行</van-button>
      <van-button type="default" class="item">文化教育</van-button>
    </div>
    <div style="display: flex;margin-top: 10px;align-items: center;">
      <div style="background-color: coral;width: 5px;height: 20px;margin-left: 20px;"></div>
      <div style="margin-left: 15px;font-size: 20px;">政务</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;padding: 0 4px 20px;" >
      <div class="zhengwu-wrap" style="display: flex;flex-wrap: wrap;">
        <div style="width: 33.3333%;height: 40px;margin-top: 20px;display: flex;align-items: center;" v-for="(item,index) in zhengwu" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div class="zhengwu-title" v-html="item.name"></div>
      </div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;justify-content: space-between;align-items: center;">
      <div style="display: flex;align-items: center;">
        <div style="background-color: chocolate;width: 5px;height: 20px;margin-left: 20px;"></div>
        <div style="margin-left: 15px;font-size: 20px;">公共服务</div>
      </div>
      <van-button type="default" style="width: 80px;height: 20px;margin-right: 15px;">+ 更多</van-button>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in gonggongfuwu" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;margin-top: 5px;">{{item.name}}</div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;align-items: center;">
      <div style="background-color: blueviolet;width: 5px;height: 20px;margin-left: 20px;"></div>
      <div style="margin-left: 15px;font-size: 20px;">便民</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in bianmin" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;margin-top: 5px;">{{item.name}}</div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;align-items: center;">
      <div style="background-color: brown;width: 5px;height: 20px;margin-left: 20px;"></div>
      <div style="margin-left: 15px;font-size: 20px;">交通出行</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in jiaotongchuxing" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;margin-top: 5px;">{{item.name}}</div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;align-items: center;">
      <div style="background-color: aqua;width: 5px;height: 20px;margin-left: 20px;"></div>
      <div style="margin-left: 15px;font-size: 20px;">文化教育</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;margin-bottom: 50px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in wenhuajiaoyu" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;margin-top: 5px;">{{item.name}}</div>
      </div>
    </div>

  </div>


</template>

<script>
export default {
  data() {
      return {
          nav: ['政务','公共服务','便民','交通出行','文化教育'],
          zhengwu: [
            {
              url: require('@/assets/service-zhengwu/1.png'),
              name: '文明实践中心'
            },
            {
              url: require('@/assets/service-zhengwu/2.png'),
              name: '社会治理服务中心'
            },
            {
              url: require('@/assets/service-zhengwu/3.png'),
              name: '红鸢在线<br/>流动党员管理系统'
            },
            {
              url: require('@/assets/service-zhengwu/4.png'),
              name: '政协履职服务平台'
            },
            {
              url: require('@/assets/service-zhengwu/5.png'),
              name: '寿光蔬菜<br/>智慧管理服务平台'
            },
            {
              url: require('@/assets/service-zhengwu/6.png'),
              name: '山东小企业和个体工商户服务网专栏'
            }
          ],
          gonggongfuwu: [
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201027/15/1603785089070/1603785089070.png',
              name: '掌上民声'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585377687205/1585377687205.png',
              name: '公积金'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200427/09/1587949734197/1587949734197.png',
              name: '求职招聘'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200624/15/1592983486030/1592983486030.png',
              name: '供求发布'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200624/17/1592990382047/1592990382047.png',
              name: '菜都鲜生'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585378732085/1585378732085.png',
              name: '蔬菜问诊'
            }
          ],
          bianmin: [
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585378344455/1585378344455.png',
              name: '志愿者'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200830/15/1598773787694/1598773787694.png',
              name: '红色物业'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200611/10/1591841971868/1591841971868.png',
              name: '户外广告设置申报'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201119/11/1605754968369/1605754968369.png',
              name: '建设银行'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200330/10/1585534892609/1585534892609.png',
              name: '农商银行'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200902/10/1599015192498/1599015192498.jpg',
              name: '招商银行'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585378359649/1585378359649.png',
              name: '天气预报'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201107/08/1604708513414/1604708513414.jpg',
              name: '新视窗便民'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585378442959/1585378442959.png',
              name: '景点查询'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200608/11/1591586816138/1591586816138.png',
              name: '网上社保'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585377708869/1585377708869.png',
              name: '职工社保'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585377724856/1585377724856.png',
              name: '居民社保'
            }
          ],
          jiaotongchuxing: [
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200401/17/1585731614800/1585731614800.jpg',
              name: '公交线路'
            },
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585377804371/1585377804371.png',
              name: '客车时间表'
            }
          ],
          wenhuajiaoyu: [
            {
              url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200328/14/1585378284049/1585378284049.png',
              name: '义务招生入学'
            }
          ]
      }
  },
  methods: {
  	selectNav(item) {

  	},
    selectItem(item) {
        // this.$router.push = ;
    }
  }
}
</script>

<style lang="scss">
.service-wrap{
  background-color: #F8F8F8;
  padding-top: 10px;
  padding-bottom: 20px;
  .box{
    width: 100%;
    height: 60px;
    overflow-x: scroll;
    display: flex;
    .item{
      margin: 5px;
      width: 100px;
      height: 40px;
      flex-shrink: 0; //横向滚动时不压缩宽度
    }
    .active1{
      background-color: red;
    }
  }
  .zhengwu-title{
    font-size: 9px;
    width: 75px;
    margin-left: 3px;
  }
  .zhengwu-wrap{
    position: relative;
    left: -3px;
  }
}
::-webkit-scrollbar {
  display: none;
}
</style>
